Transformador de texto con Javascript, codigo y aplicaciones

01 June 2023
JS,
100Snippets


<style>
  #inputText {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>


<input type="text" id="inputText" placeholder="Ingresa tu texto aquí">
<button onclick="transformarTexto()">Transformar</button>
<p id="resultado"></p>

<script>
function transformarTexto() {
  var textoEntrada = document.getElementById("inputText").value;
  var textoResultado = textoEntrada.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[,;:.]/g, "").replace(/\s+/g, "-");
  document.getElementById("resultado").innerText = textoResultado;
}
</script>

Este código HTML crea un campo de entrada de texto donde puedes ingresar tu texto. Al hacer clic en el botón "Transformar", el texto ingresado se transformará según los criterios que has especificado y se mostrará debajo del botón.

Claro, aquí está una explicación técnica y formal del código proporcionado:

El código HTML proporciona una interfaz de usuario simple que consta de un campo de entrada de texto y un botón. Cuando el usuario ingresa un texto y hace clic en el botón "Transformar", se activa una función de JavaScript que realiza las siguientes acciones:

Captura de texto de entrada: La función transformarTexto() obtiene el valor del campo de entrada de texto utilizando el método getElementById() para acceder al elemento HTML con el id "inputText". Este valor se asigna a la variable textoEntrada.
Transformación del texto: El texto de entrada se transforma utilizando una serie de métodos de cadena en JavaScript:
- toLowerCase(): Convierte todo el texto a minúsculas.
- normalize("NFD"): Normaliza el texto utilizando la forma de composición canónica descompuesta (NFD) para asegurar que los caracteres acentuados se descompongan en su forma base y sus diacríticos por separado.
- .replace(/[\u0300-\u036f]/g, ""): Elimina los diacríticos del texto normalizado.
- .replace(/[,;:.]/g, ""): Elimina las comas, dos puntos y punto y coma del texto.
- .replace(/\s+/g, "-"): Reemplaza los espacios en blanco con guiones medios para cumplir con el criterio de formato requerido.
Mostrar el texto transformado: El texto transformado se asigna al contenido del elemento HTML con el id "resultado" utilizando innerText, lo que hace que el texto resultante se muestre debajo del botón.

Este tipo de código podría ser útil en una variedad de campos de aplicación, incluyendo:

Optimización de URL: Al crear URL amigables para SEO, puede ser necesario transformar texto de entrada en un formato específico como parte de la generación de URL legibles por humanos y amigables para los motores de búsqueda.
Procesamiento de datos de formularios: En aplicaciones web que recopilan datos de usuario a través de formularios, a menudo es útil normalizar y limpiar los datos ingresados antes de procesarlos o almacenarlos en una base de datos.
Generación de etiquetas y categorías: Para organizar y clasificar contenido en sitios web o aplicaciones, puede ser necesario convertir texto de entrada en etiquetas o categorías utilizando un formato consistente y normalizado.
Desarrollo de herramientas de análisis de texto: En campos como el procesamiento de lenguaje natural y la minería de textos, es común preprocesar y normalizar el texto de entrada para facilitar el análisis y la extracción de información significativa. Este tipo de código podría formar parte de un paso de preprocesamiento en tales herramientas.

View on Instagram View on Flickr View on Twitter